<template>
  <div id="bg">
    <img class="img"
         src="../../assets/imgs/lucky/pc-1.jpg"
         alt="">
    <!-- <div class="LoadIng"
         v-if="isLoadingShow">
      <span class="loadingCenter">抽奖中...</span>
    </div> -->
    <div id="bg">
      <div class="box">
        <div class="boxCenter"
             v-for="item in luckyList">
          <span>{{item.levelName}}</span>
          <img src="../../assets/imgs/lucky/click.jpg"
               v-if="!item.isOpened"
               alt=""
               @click="lucky(item)"
               style="vertical-align:middle">
          <img src="../../assets/imgs/lucky/setClick.jpg"
               v-else
               alt=""
               @click="lucky(item)"
               style="vertical-align:middle">
        </div>
      </div>
    </div>
    <img class="maer"
         src="../../assets/imgs/lucky/maer.png"
         alt="">
    <!-- <div class="overfllow"
         v-if="overfllow">
      <img class="backImg"
           src="../../assets/imgs/lucky/backImg.png"
           alt="">
    </div> -->
    <div class="mask"
         v-if="dialogTableVisible">
      <div class="maskContent">
        <img class="maskBack"
             src="../../assets/imgs/lucky/pc-2.png"
             alt="">
        <img class="close"
             @click.stop="imgClose"
             src="../../assets/imgs/lucky/close.png"
             alt="">
        <div class="maskBox1"
             v-if="oneShow">
          <h3 class="maskHeader">一等奖</h3>
          <div class="boxContent threeFont">
            <div class="oneMaskName"
                 v-for="item in list">
              <div class="name">{{item.customerName}}</div>
              <div class="phone">{{item.phone}}</div>
              <div class="lucky">{{item.goodName}}</div>
            </div>
          </div>
        </div>
        <div class="maskBox2"
             v-if="twoShow">
          <h3 class="maskHeader">二等奖</h3>
          <div class="boxContent threeFont">
            <div class="maskName"
                 v-for="item in list">
              <span class="name tab">{{item.customerName}}</span>
              <span class="phone tab">{{item.phone}}</span>
              <span class="lucky tab">{{item.goodName}}</span>
            </div>
          </div>
        </div>
        <div class="maskBox3"
             v-if="threeShow">
          <h3 class="maskHeader">三等奖</h3>
          <div class="boxContent threeFont">
            <div class="maskName"
                 v-for="item in list">
              <span class="name tab">{{item.customerName}}</span>
              <span class="phone tab">{{item.phone}}</span>
              <span class="lucky tab">{{item.goodName}}</span>
            </div>
          </div>
        </div>
        <div class="maskBox4"
             v-if="goodShow">
          <h3 class="maskHeader">幸运奖</h3>
          <vue-seamless-scroll :data="list"
                               :class-option="classOption"
                               class="table-content">
            <ul>
              <li v-for="(item,index) in list"
                  :key="index">
                <span class="name tab"
                      v-text="item.customerName"></span>
                <span class="phone tab"
                      v-text="item.phone"></span>
                <span class="lottery tab"
                      v-text="item.goodName"></span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
        <div class="maskBox1 numMaskBox"
             v-if="!(oneShow||twoShow||threeShow||goodShow)&&setTime">
          <img class="loading"
               :src="loading"
               alt="">
          <span class="number">
            {{numList}}
          </span>
          <!-- {{numList}} -->
        </div>
      </div>
      <!-- <img src="../../assets/imgs/lucky/backImg.png"
           alt=""> -->
    </div>

    <!-- <el-dialog :visible.sync="dialogTableVisible">
      <img src="../../assets/imgs/lucky/backImg.png"
           alt="">
    </el-dialog> -->
  </div>
</template>

<script>
import loading from '../../assets/imgs/lucky/loading.gif'
export default {
  data () {
    return {
      loading,
      luckyList: [],
      num: 0,
      // overfllow: true,
      dialogTableVisible: false,
      list: [
      ],
      levelList: [
        { levelName: '一等奖', prop: 'oneShow' },
        { levelName: '二等奖', prop: 'twoShow' },
        { levelName: '三等奖', prop: 'threeShow' },
        { levelName: '幸运奖', prop: 'goodShow' }
      ],
      oneShow: false,
      twoShow: false,
      threeShow: false,
      goodShow: false,
      // isLoadingShow: false,
      numList: 5,
      intervalId: null,
      setTime: false
    }
  },
  created () {
    this.luckyListNumber()
  },
  computed: {
    classOption () {
      return {
        // singleHeight: 57,
        waitTime: 2000,
        step: 0.5,
        hoverStop: false
      }
    }
  },
  methods: {
    imgClose () {
      clearInterval(this.intervalId)
      this.oneShow = false
      this.twoShow = false
      this.threeShow = false
      this.goodShow = false
      this.dialogTableVisible = false
      this.luckyListNumber()
      // this.isLoadingShow = false
    },
    luckyListNumber () {
      this.$axios(`/api/activity/level/list/${this.$route.query.id}`)
        .then(res => {
          if (res.data.meta.success) {
            this.luckyList = res.data.data
          }
        })
    },
    async lucky (itemNum) {
      this.num++
      if (this.num === 1) {
        this.$axios(`/api/activity/level/open/${itemNum.id}`)
          .then(res => {
            this.num = 0
            this.numList = 5
            if (res.data.meta.success) {
              this.dialogTableVisible = true
              // this.isLoadingShow = false
              let _this = this
              this.setTime = !itemNum.isOpened
              try {
                if (itemNum.isOpened) {
                  _this.list = res.data.data
                  let find = _this.levelList.find(item => item.levelName === itemNum.levelName)
                  _this.$set(_this, find.prop, true)
                  _this.isLoadingShow = true
                } else {
                  _this.intervalId = setInterval(function () {
                    _this.numList--
                    if (_this.numList < 1) {
                      _this.list = res.data.data
                      let find = _this.levelList.find(item => item.levelName === itemNum.levelName)
                      _this.$set(_this, find.prop, true)
                      _this.isLoadingShow = true
                      clearInterval(_this.intervalId)
                    }
                  }, 1000)
                }
              } catch (error) {
                // _this.isLoadingShow = false
                _this.dialogTableVisible = false
                _this.$message.error('系统繁忙,请重新再试....')
              }
            }
          })
      }
    }

  }
}
</script>

<style scoped rel="stylesheet/scss" type="text/scss" lang="scss">
.img {
  min-width: 1200px;
  width: 100%;
  height: 100%;
  position: absolute;
}

/* #bg {
  min-width: 1200px;
  height: 100%;
  width: 100%;
  background: url("../../assets/imgs/lucky/pc-抽奖1.jpg") no-repeat;
  background-size: 100% 100%;
  position: fixed;
} */
.over {
  border: 1px solid #ccc;
  height: 100px;
  width: 100px;
  position: absolute;
  top: 20vw;
  left: 20vw;
}
.box {
  position: absolute;
  bottom: 135px;
  height: 55%;
  // height: 550px;
  width: 90%;
  background: #fff;
  // z-index: ;
  border-radius: 20px;
  margin: 0 auto;
  // top: 340px;
  display: flex;
  flex-wrap: wrap;
  // padding: 20px;
  padding: 30px 100px;
  color: #7b3e29;
  font-weight: 800;
  // min-width: 1600px;
  > div {
    width: 50%;
    font-size: 70px;
    > img {
      width: 50%;
    }
  }
}
.maer {
  position: absolute;
  width: 300px;
  bottom: 0px;
  left: 10px;
}
.backImg {
  position: absolute;
  opacity: 1;
  width: 20%;
}
.mask {
  background-color: rgba(0, 0, 0, 0.3);
  // opacity: 0.3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.maskContent {
  position: relative;
  margin: 0 auto;
}
.close {
  position: absolute;
  right: -80px;
  top: -50px;
  width: 10%;
}
.maskBack {
  // width: 1200px;
  width: 1500px;
  height: 675px;
}

.maskBox1,
.maskBox2,
.maskBox3,
.maskBox4 {
  height: 400px;
  width: 1100px;
  background: #fff;
  position: absolute;
  left: 200px;
  bottom: 40px;
  border-radius: 20px;
  text-align: center;
}
.maskHeader {
  font-size: 60px;
  margin-top: 20px;
  color: #ff8838;
}
.boxContent {
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.maskName {
  width: 700px;
  padding: 10px 0;
  font-size: 35px;
  display: flex;
  color: #7b3d26;
  font-weight: 600;
  margin-left: 45px;
}
.name {
  flex: 2;
  text-align: left;
}
.phone {
  flex: 3;
  text-align: left;
}
.lucky {
  flex: 5;
  text-align: left;
}
.threeFont .maskName {
  font-size: 25px;
  padding: 3px 0;
}
.table-content {
  height: 250px;
  overflow: hidden;
  font-size: 25px;
  color: #7b3d26;
}
.tab {
  min-width: 150px;
  margin-right: 50px;
  display: inline-block;
}
.boxCenter {
  text-align: center;
  line-height: 220px;
}
.oneMaskName {
  display: flex;
  flex-direction: column;
  font-size: 35px;
  color: #7b3d26;
  font-weight: 600;
  > div {
    line-height: 60px;
    text-align: center;
  }
}
.LoadIng {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 80px;
  color: #ff8939;
  font-weight: 800;
}

// .loadingCenter {
//   display: inline-block;
//   height: 100px;
//   vertical-align: bottom;
//   animation: ellipsis 4s linear infinite;
//   overflow: hidden;
//   letter-spacing: 40px;
//   // content: "抽奖中\2026\2026"; /* ascii code for the ellipsis character */
// }

// @keyframes ellipsis {
//   from {
//     width: 0px;
//   }
//   to {
//     width: 580px;
//   }
// }
.numMaskBox {
  line-height: 400px;
  font-size: 220px;
  color: #000;
}
#bg {
  margin: 0 auto;
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading {
  height: 400px;
}
.loadingBox {
  position: relative;
}
.number {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  font-size: 122px;
}
</style>